<template>
  <div id="user-group">
    <v-header title="用户分群" ref="vHeader" @on-save="save" :showDownloadBtn="false"></v-header>
    <div  class="user-group-warp">
      <div class="user-group-box">
        <v-pageHeader ref="pageHeader" @on-click="showList" :InquireTransCode="InquireTransCode" :setTransCode="setTransCode"
                      :delTransCode="delTransCode" itemKey="anal_id" itemValue="anal_name"
                      num="07"></v-pageHeader>
        <!--用户筛选-->
        <div class="user-screen">
          <div class="u-input" v-for="(item, index) in userScreen" :key="item.key">
            <span class="lf font12">用户筛选</span>
            <el-select size="mini" class="width160 height40 lf" v-model="item.meta_id" placeholder="账户总额"
                       @change="changeEvent(item)" filterable>
              <el-option
                v-for="item in data.META_COLUME"
                :key="item.meta_id"
                :label="item.colume_chs"
                :value="item.meta_id">
              </el-option>
            </el-select>
            <el-select class="width100 height40 lf" v-model="item.vs_code_value" placeholder="等于" @change="changeAttr(item)" size="mini">
              <el-option
                v-for="val in cond_arr2"
                :key="val.key"
                :label="val.code_value_nm_cns"
                :value="val.code_value">
              </el-option>
            </el-select>
            <el-input v-if="getBool_1(item)" class="lf" v-model="item.cond_value[0]" size="mini"></el-input>
            <div class="date-time lf" v-if="getBool_2(item)">
              <span>在</span>
              <el-date-picker
                size="mini"
                class="width270"
                v-model="item.vs_date_value"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="change(item)"
              >
              </el-date-picker>
              <span>之间</span>
            </div>
            <div class="amount-range lf" v-if="getBool_3(item)">
              <span>在</span>
              <el-input class="width160" v-model="item.cond_value[0]" placeholder="输入内容" size="mini"></el-input>
              <span>和</span>
              <el-input class="width160" v-model="item.cond_value[1]" placeholder="输入内容" size="mini"></el-input>
              <span>之间</span>
            </div>
            <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                              :closable="true"></v-selectCheckbox>
            <div class="btn-operation">
              <i class="iconfont icon-add" @click="uAdd(index)"></i>
              <i class="iconfont icon-close" v-if="userScreen.length > 1" @click="uRemove(index)"></i>
            </div>
          </div>
        </div>
        <!--事件筛选-->
        <div class="event-screen bg-color-white">
          <event-screening ref="screening"></event-screening>
          <div class="examine">
            <div class="btns rf">
              <el-button type="primary" size="mini" @click="search">查看</el-button>
              <el-button size="mini" @click="cancelEven">重置</el-button>
            </div>
          </div>
        </div>
        <div class="bg-color-white padding20">
          <range-date-picker class="timewidth210 height30" ref="toolBar" :defaultDate="dates" @date-change="getDate"></range-date-picker>
          <!-- <el-date-picker
            size="mini"
            class="timewidth210 height30"
            v-model="dates"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getDate"
            :picker-options="disableDate"
          >
          </el-date-picker> -->
        </div>
      </div>
      <!--表格-->
      <div class="user-table bg-color-white">
        <table class="table-rows" width="100%">
          <thead>
          <tr>
            <th v-for="item in tableDataTitle" :key="item.id">{{item}}</th>
          </tr>
          </thead>
          <tbody>
          <!--tableData-->
          <tr v-for="item in tableData" :key="item.id">
            <td v-for="item in item.cells" :key="item.id">
              {{item}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {VButton, VHeader, VPageHeader, VNumberSelect, RangeDatePicker} from '../../../../components'
  import api from '../../../../api/url'
  import ajax from '../../../../api/ajax/ajax'
  import Msg from '../../../../assets/js/msg'
  import {getDateTime, dateFormat} from '../../../../assets/js'
  import eventScreening from './comm/eventScreening'

  export default {
    components: {
      VButton,
      VHeader,
      VPageHeader,
      VNumberSelect,
      eventScreening,
      RangeDatePicker
    },
    data () {
      return {
        InquireTransCode: api.SELECTBAARCHANALLIST, // 查询
        setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: api.DELETEBAARCHANAL, // 删除常用
        analyse_type: '07',
        user_list: [],
        value: '',
        from_date: '', // 开始时间
        to_date: '', // 结束时间
        dates: [],
        cond_arr2: null, // 条件的第二框
        tableDataTitle: [],
        tableData: [],
        userScreen: [{
          cond_link: '',
          meta_id: '',
          vs_code_value: '',
          cond_fmt: '',
          cond_value: []
        }],
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        }
      }
    },
    methods: {
      save (obj) { // 点击保存为常用
        if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        // 保存页面输入的内容
        let paramsData = {
          analyse_type: this.analyse_type,
          from_date: this.from_date,
          to_date: this.to_date,
          userScreen: this.userScreen, // 事件筛选
          screening: this.$refs.screening.filterResultList // 漏斗步骤
        }
        // 调用 保存为常用接口
        ajax.post(api.SAVEASCOMMON,
          {
            anal_name: obj.pageHeaderName,
            anal_type: this.analyse_type,
            is_top: obj.isTop,
            message_content: JSON.stringify(paramsData)
          }
        ).then(res => {
          Msg.alert('保存成功')
          ajax.post(this.InquireTransCode, {anal_type: this.analyse_type}).then(res => {
            this.$refs.pageHeader.getList(res.data)
            this.$refs.vHeader.reset()
          })
        })
      },
      // 查看
      search () {
        if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        let message = {
          from_date: this.from_date,
          to_date: this.to_date,
          analyse_type: this.analyse_type,
          userScreen: this.userScreen, // 用户筛选
          screening: this.$refs.screening.filterResultList // 事件筛选
        }
        ajax.post(api.ANALYSESEARCHOBJECT, message).then(res => {
          this.tableData = res.data.rows
          this.tableDataTitle = res.data.title
        })
      },
      // 获取日期
      getDate (list) {
        if (list) {
          this.from_date = getDateTime(list[0], 's')
          this.to_date = getDateTime(list[1], 's')
        } else {
          this.from_date = ''
          this.to_date = ''
        }
      },
      cancelEven () {
        this.from_date = '' // 时间
        this.to_date = ''
        this.dates = [this.from_date, this.to_date]
        // 用户筛选
        this.userScreen = [{
          cond_link: '',
          meta_id: '',
          vs_code_value: '',
          cond_fmt: '',
          cond_value: []
        }]
        this.$refs.screening.filterResultList = [] // 事件筛选
        // 清空表格数据
        this.tableDataTitle = []
        this.tableData = []
      },
      // 点击常用反显数据
      showList (obj) {
        ajax.post(api.SELECTBAARCHANAL,
          {
            anal_id: obj.anal_id
          }
        ).then(res => {
          // 数据反显在输入框 下拉框
          let data = JSON.parse(res.data.message_content)
          // this.userGroup = data.user_group // 用户分群
          this.userScreen = data.userScreen // 用户筛选
          // 事件筛选
          this.$refs.screening.filterResultList = data.screening
          // 添加到时间选择框里面
          this.from_date = data.from_date
          this.to_date = data.to_date
          let dateArr = [dateFormat(this.from_date), dateFormat(this.to_date)]
          dateArr.forEach((item, index) => {
            this.dates.splice(index, 1, item)
          })
        })
      },
      uAdd (index) {
        if (this.userScreen.length < 3) {
          let parms = {
            cond_link: '',
            meta_id: '',
            cond_fmt: '',
            cond_value: []
          }
          this.userScreen.splice(index + 1, 0, parms)
        } else {
          Msg.alert('分组最多添加三个')
        }
      },
      uRemove (index) {
        this.userScreen.splice(index, 1)
      },
      // 事件选择
      changeEvent (obj) {
        this.data.META_COLUME.forEach(item => {
          if (item.meta_id === obj.meta_id) {
            if (item.data_type === 'text') {
              this.cond_arr2 = this.data.B010003
              obj.vs_data_type = 'text'
              obj.vs_code = 'B010003'
            } else if (item.data_type === 'number') {
              this.cond_arr2 = this.data.B010004
              obj.vs_data_type = 'number'
              obj.vs_code = 'B010004'
            } else if (item.data_type === 'date') {
              this.cond_arr2 = this.data.B010005
              obj.vs_data_type = 'date'
              obj.vs_code = 'B010005'
            }
          }
        })
      },
      // 属性选择
      changeAttr (obj) {
        obj.cond_fmt = `${obj.vs_code}#${obj.vs_code_value}`
      },
      // 判断条件
      getBool_1 (item) {
        const type = item.vs_data_type
        const value = item.vs_code_value
        if (type === 'number' && value > 0 && value < 9) { // 1-8
          return true
        } else if (type === 'text' && value > 0 && value < 11) { // 1-10
          return true
        } else if (type === 'date' && value > 0 && value < 11) { // 1-10
          return true
        }
      },
      getBool_2 (item) {
        if (item.vs_data_type === 'date' && item.vs_code_value === '15') {
          return true
        }
      },
      getBool_3 (item) {
        if (item.vs_data_type === 'number' && item.vs_code_value === '11') {
          return true
        }
      },
      getBool_4 (item) {
        return false
      },
      // 区间日期改变事件
      change (item) {
        if (item.vs_date_value) {
          item.vs_date_value.forEach((val, key) => {
            item.cond_value[key] = getDateTime(val, 's')
          })
        }
      }
    },
    created () {
      this.dates = [new Date(), new Date()]
      this.from_date = getDateTime(new Date(), 's')
      this.to_date = getDateTime(new Date(), 's')
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #user-group
    height 100%
    .user-group-warp
      height calc(100% - 56px)
      overflow: auto
      padding 10px
      .user-group-box
        background-color #fff
        padding 0 20px
        .title
          height 30px
          line-height 30px
          color #8BC4FF
          position relative
          i.iconfont
            font-size 10px
        .title:after
          content ''
          display inline-block
          width calc(100% - 110px)
          height 2px
          background #8BC4FF
          position absolute
          top 14px
          left 90px
        .user-screen
          border-bottom 1px solid #D8DCE5
          .u-input
            span.font12
              display inline-block
              width 80px
              margin-right 5px
            padding 10px 0
            .btn-operation
              i.iconfont
                font-size 14px
                margin 0 5px 0 5px
                color #D8DCE5
                display inline-block
                height 30px
                line-height 30px
              i.iconfont:hover
                color #016DFB
            &:last-child
              margin-bottom 10px
            & > .el-input
              width 100px
        .event-screen
          height: 100%;
          .examine
            height 30px
            line-height 30px
            padding 0 20px
            margin-top 30px
            margin-bottom 20px
          .btns
            width 150px
            .el-button
              display inline-block
              width 65px
              height 30px
        .padding20
          padding  20px 0
      .user-table
        margin-top 10px
        .table-rows
          border: 1px solid #D8DCE5
          border-collapse collapse
          text-align center
          color #5A5E66
          th
            font-weight normal
            border-left 1px solid #D8DCE5
            border-top 1px solid #D8DCE5
            height 50px
            font-size 14px
            background-color #f4f4f5
          td
            border-left 1px solid #D8DCE5
            border-top 1px solid #D8DCE5
            height 50px
            font-size 12px
  #user-group .u-input span.font12
    line-height 30px
</style>
